<template>
  <div class="min-h-screen flex flex-col">
    <div class="bg-gradient-to-r from-primary to-secondary py-12">
      <div class="container mx-auto px-4">
        <h1 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold text-white">我的收藏</h1>
        <p class="text-white/80 mt-2">查看你收藏的旅游城市</p>
      </div>
    </div>
    
    <main class="flex-grow container mx-auto px-4 py-12">
      <div v-if="favoriteCities.length === 0" class="text-center py-16">
        <div class="inline-flex items-center justify-center w-24 h-24 bg-gray-100 rounded-full mb-6">
          <i class="fa fa-heart-o text-gray-400 text-4xl"></i>
        </div>
        <h2 class="text-2xl font-bold text-gray-800 mb-2">还没有收藏的城市</h2>
        <p class="text-gray-600 mb-6">浏览城市并点击"收藏"按钮将其添加到收藏夹</p>
        <router-link to="/" class="bg-primary hover:bg-primary/90 text-white px-6 py-3 rounded-lg font-medium inline-flex items-center transition-colors">
          浏览城市 <i class="fa fa-arrow-right ml-2"></i>
        </router-link>
      </div>
      
      <div v-else class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
        <CityCard 
          v-for="city in favoriteCities" 
          :key="city.id" 
          :city="city" 
          @toggle-favorite="toggleFavorite"
        />
      </div>
    </main>
  </div>
</template>

<script>
import { computed } from 'vue';
import { useStore } from 'vuex';

export default {
  setup() {
    const store = useStore();
    
    // 获取所有城市
    const allCities = computed(() => store.getters.allCities);
    
    // 获取收藏的城市ID
    const favoriteIds = computed(() => store.getters.favoriteCities);
    
    // 获取收藏的城市数据
    const favoriteCities = computed(() => {
      return allCities.value.filter(city => favoriteIds.value.includes(city.id));
    });
    
    // 切换收藏状态
    const toggleFavorite = (cityId) => {
      if (store.getters.isCityFavorite(cityId)) {
        store.dispatch('removeFromFavorites', cityId);
      } else {
        store.dispatch('addToFavorites', cityId);
      }
    };
    
    return {
      favoriteCities,
      toggleFavorite
    };
  }
};
</script>
